<template>
  <ScrollRefresh @refresh="onRefresh" @loadmore="onLoadmore">
    <div class="index-container">
      <div class="list" :key="listKey">
        <div class="list-item" v-for="(item, index) in videoList" :key="index" @click="onVideo(index)">
          <div class="item-title">{{ item.title }}</div>
          <div class="item-video">
            <XgPlayer :url="item.playUrl" :active="currentVideo == index ? true : false" @play="onVideo(index)">
            </XgPlayer>
          </div>
          <div class="item-info">
            <van-image round width="1.25rem" height="1.25rem" :src="item.userPic" />
            <div class="user-name">{{ item.userName }}</div>
            <div class="duration">时长：{{ item.duration }}</div>
          </div>
        </div>
      </div>
    </div>
  </ScrollRefresh>
</template>

<script setup>
import { ref, watch, nextTick } from 'vue';
import { XgPlayer } from '@/components'
import { getHaoKanVideo } from '@/api/open.js'

const videoList = ref([])
const currentVideo = ref(0)
const listKey = ref(0)

init()
function init() {
  getVideo()
}

function getVideo() {
  getHaoKanVideo({
    size: 4
  }).then(res => {
    let vlist = res.result?.list || []
    videoList.value?.push(...vlist)
    console.log('视频列表--->', videoList.value);
  })
}

function onVideo(e) {
  currentVideo.value = e
  console.log('点击', e);
}

function onRefresh(e) {
  currentVideo.value = 0

  getHaoKanVideo({
    size: 4
  }).then(res => {
    videoList.value = res.result?.list || []
    listKey.value++
    e(false)
  })
}

function onLoadmore() {
  getVideo()
}
</script>

<style lang="scss" scoped>
.index-container {
  width: 100%;
  height: 100%;
  overflow: auto;

  .list {
    padding: 0 0.75rem;

    .list-item {
      padding: 0.75rem 0;
      border-bottom: 1px #eee solid;

      .item-title {
        font-size: 0.875rem;
        font-weight: 700;
      }

      .item-video {
        width: 100%;
        margin-top: 0.75rem;
        // 锁定宽高比
        aspect-ratio: 16/9;
      }

      .item-info {
        width: 100%;
        display: flex;
        align-items: center;
        margin-top: 0.375rem;

        .user-name {
          margin-left: 0.375rem;
          font-size: 0.75rem;
          flex: 1;
        }

        .duration {
          font-size: 0.75rem;
        }
      }
    }
  }

}
</style>